<template>
  <div id="login">
      <!-- 顶部区域 -->
      <div class="top">
        <div class="left">
          <img width="215px" src="../assets/logo1.png" alt=""> 
        </div>
        <div class="right">
          <ul>
            <router-link tag="li" to=""><i class="el-icon-search"></i></router-link>
            <router-link tag="li" to="">产品类型</router-link> 
            <router-link tag="li" to="">关于我们</router-link>
            <router-link tag="li" to="/PersonalCenter">
              <span  class="mui-icon mui-icon-person" style="margin:0 10px 0 -15px"></span>登录
            </router-link> 
          </ul>
        </div>
      </div>

      <!-- 中间登录部分 -->
      <div class="mid">
        <div class="login-container">
          <div class="login-card">

          </div>
        </div>
        <div class="login-page">
        
          <form>
            <div class="form-group">
              <label>您的账号</label>
              <input type="text" class="form-control" id="exampleInputEmail1" >
            </div>
            <div class="form-group">
              <label style="display:flex;justify-content: space-between;"><span>您的密码</span><a href="javascript:;" style="color:skyblue;font-size:14px">忘记密码?</a></label>
              <input type="password" class="form-control" id="exampleInputPassword1" >
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox"> 保持登录状态
              </label>
            </div>
            <router-link to="/PersonalCenter">
              <button type="submit" class="btn btn-primary" style="width:100%;border-radius: 10px;">登录</button>
            </router-link>
          </form>
        </div>
      </div>

      <!-- 底部 -->
      <div class="footer">
          <Foot></Foot>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Foot from '@/components/Foot.vue'
export default {
  name: 'login',
  components: {
    Foot
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
#login{
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top{
  height: 70px;
  width: 1200PX;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top>.right>ul{
  height: 100%;
  width: 280px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.top>.right>ul>li:nth-child(1),.top>.right>ul>li:nth-child(2),.top>.right>ul>li:nth-child(3),{
  color:#9D9D9D;
}
.top>.right>ul>li:last-child{
color: #6CA2D3;
}

.mid{
  flex: 1;
  background: url("../assets/bg.png") no-repeat center;
  background-size: cover;
}
.mid>.login-container{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mid>.login-container .login-card{
  width: 465px;
  margin: 0 auto;
  padding: 0 45px;
  opacity: 0.8px;
}
.mid>.login-page{
  width: 30%;
  height: 80%;
  color:grey;
  font-weight: normal!important;
  margin:8vh auto;
  background:white;
  opacity: 0.8;
  padding: 40px 45px;
}
.mid>.login-page .form-control{
  border-radius: 10px;
}
.footer{
  height: 70px;
}
</style>
